<template>
	<view :class="['container', layoutClass]">
		<!-- 缩略图布局（默认） -->
		<view v-if="layout === 'thumbnail'" class="thumbnail-layout">
			<view v-for="(item, index) in list" class="content" :key="index">
				<!-- 缩略图布局内容（保持原有实现） -->
				<view class="imagebox" @click="handleItemClick(item,index)">
					<view v-if="isMultiSelect" class="multi-select-checkbox"
						:class="{ 'checked': isSelected(item.Id) }"
						@click.stop="toggleSelect(item.Id)">
						<uni-icons 
						  :type="isSelected(item.Id) ? 'checkbox-filled' : 'circle'" 
						  size="24" 
						  :color="isSelected(item.Id) ? '#03A9F4' : '#ffffff'" 
						/>
					</view>
					<image class="image" :src="item.cover || defaultImg" mode="aspectFill" lazy-load></image>
					<uni-icons v-if="item.Type=='Movie' || item.Type=='Video'" custom-prefix="iconfont" type="icon-play1" color="#fff"
						class="icon" size="40"></uni-icons>
					<uni-icons v-if="item.UserData.Played" type="checkbox-filled" color="hsl(116, 41.7%, 50.2%)"
						class="playedicon" size="25"></uni-icons>
					<text class="video-duration" v-if="item.Type=='Movie' || item.Type=='Video'">{{ formattedTime(item.RunTimeTicks) }}</text>
					<text class="video-type" v-if="item.Type=='BoxSet'">合集</text>
					<text class="video-type" v-if="item.Type=='Movie' || item.Type=='Video'">电影</text>
					<text class="video-type" v-if="item.Type=='Tag'">标签</text>
					<text class="video-type" v-if="item.Type=='Genre'">流派</text>
					<text class="video-type" v-if="item.Type=='Folder'">文件夹</text>
				</view>
				<view class="info">
					<view class="">
						<text class="title" 
						:style="{ fontSize: item.Name.length>16 ? '0.8rem' : '1rem' }"
						@click.stop="openDetailPopup(item)">{{ item.Name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 列表布局 -->
		<view v-else-if="layout === 'list'" class="list-layout">
			<view v-for="(item, index) in list" :key="index" class="list-item" @click="handleItemClick(item,index)">
				<view class="list-item-image">
					<image :src="item.cover || defaultImg" mode="aspectFill" lazy-load></image>
					<uni-icons v-if="item.Type=='Movie' || item.Type=='Video'" custom-prefix="iconfont" type="icon-play1" color="#fff"
						class="icon" size="24"></uni-icons>
				</view>
				<view class="list-item-info">
					<text class="list-title">{{ item.Name }}</text>
					<view class="list-meta">
						<text v-if="item.Type=='Movie' || item.Type=='Video'" class="meta-item">{{ formattedTime(item.RunTimeTicks) }}</text>
						<text class="meta-item">{{ getTypeText(item.Type) }}</text>
						<uni-icons v-if="item.UserData.Played" type="checkbox-filled" color="hsl(116, 41.7%, 50.2%)"
							size="16" class="played-icon"></uni-icons>
					</view>
				</view>
				<view v-if="isMultiSelect" class="list-item-checkbox" @click.stop="toggleSelect(item.Id)">
					<uni-icons 
					  :type="isSelected(item.Id) ? 'checkbox-filled' : 'circle'" 
					  size="24" 
					  :color="isSelected(item.Id) ? '#03A9F4' : '#999'" 
					/>
				</view>
			</view>
		</view>
		
		<!-- 列表-只有文字布局 -->
		<view v-else-if="layout === 'list-text'" class="list-text-layout">
			<view v-for="(item, index) in list" :key="index" class="list-item" @click="handleItemClick(item,index)">
				<view class="list-item-info">
					<text class="list-title">{{ item.Name }}</text>
				</view>
				<view v-if="isMultiSelect" class="list-item-checkbox" @click.stop="toggleSelect(item.Id)">
					<uni-icons 
					  :type="isSelected(item.Id) ? 'checkbox-filled' : 'circle'" 
					  size="24" 
					  :color="isSelected(item.Id) ? '#03A9F4' : '#999'" 
					/>
				</view>
			</view>
		</view>

		<!-- 表格布局 -->
		<view v-else-if="layout === 'table'" class="table-layout">
			<view class="table-header">
				<view class="table-col" style="width: 40%;">名称</view>
				<view class="table-col" style="width: 20%;">类型</view>
				<view class="table-col" style="width: 20%;">时长</view>
				<view class="table-col" style="width: 15%;">状态</view>
				<view v-if="isMultiSelect" class="table-col" style="width: 5%;"></view>
			</view>
			<view class="table-body">
				<view v-for="(item, index) in list" :key="index" class="table-row" @click="handleItemClick(item,index)">
					<view class="table-col" style="width: 40%;">
						<text @click.stop="openDetailPopup(item)">{{ item.Name }}</text>
					</view>
					<view class="table-col" style="width: 20%;">{{ getTypeText(item.Type) }}</view>
					<view class="table-col" style="width: 20%;">
						<text v-if="item.Type=='Movie' || item.Type=='Video'">{{ formattedTime(item.RunTimeTicks) }}</text>
					</view>
					<view class="table-col" style="width: 15%;">
						<uni-icons v-if="item.UserData.Played" type="checkbox-filled" color="hsl(116, 41.7%, 50.2%)"
							size="16"></uni-icons>
						<text v-if="item.UserData.Played">已播放</text>
					</view>
					<view v-if="isMultiSelect" class="table-col" style="width: 5%;" @click.stop="toggleSelect(item.Id)">
						<uni-icons 
						  :type="isSelected(item.Id) ? 'checkbox-filled' : 'circle'" 
						  size="20" 
						  :color="isSelected(item.Id) ? '#03A9F4' : '#999'" 
						/>
					</view>
				</view>
			</view>
		</view>

		<nothing v-if="list.length == 0" :msg="msg" />
	</view>
</template>

<script>
	import nothing from '@/components/nothing.vue'
	import {
		videoDataFormatter
	} from "@/common/videoDataFormatter.js";
	export default {
		name: 'list',
		props: {
			list: {
				type: Array,
				default: []
			},
			msg: {
				type: String,
				default: "请探索更多。。"
			},
			httpParams: {
				type: Object,
				default() {
					return {}
				}
			},
			isMultiSelect: {
			  type: Boolean,
			  default: false
			},
			selectedIds: {
			  type: Array,
			  default: () => []
			},
			// 新增布局类型参数
			layout: {
				type: String,
				default: 'thumbnail', // 默认缩略图布局
				validator: (value) => {
					// 验证合法值
					return ['thumbnail', 'list', 'table','list-text'].includes(value);
				}
			}
		},
		components: {
			nothing,
		},
		data() {
			return {
				defaultImg: require("@/static/img/errorImg.jpg"),
				checkDicts: [],
				selectCheckbox: []
			};
		},
		computed: {
			layoutClass() {
				return `layout-${this.layout}`;
			}
		},
		methods: {
			// 新增：获取类型文本
			getTypeText(type) {
				switch(type) {
					case 'BoxSet': return '合集';
					case 'Movie':
					case 'Video': return '电影';
					case 'Tag': return '标签';
					case 'Genre': return '流派';
					case 'Folder': return '文件夹';
					default: return type;
				}
			},
			isSelected(id) {
			  return this.selectedIds.includes(id);
			},
			toggleSelect(id) {
			  this.$emit('toggle-select', id);
			},
			isLongTitle(videoTitle) {
			  console.log(videoTitle)
			  let charCount = 0;
			  for (let i = 0; i < videoTitle.length; i++) {
				const char = videoTitle.charAt(i);
				charCount += char.match(/[^\x00-\xff]/) ? 2 : 1;
			  }
			  return charCount > 32;
			},
			openDetailPopup(item) {
				this.$emit('open-detailPopup', item);
			},
			formattedTime(runTimeTicks) {
				return videoDataFormatter.formatRunTime(runTimeTicks);
			},
			formattedSize(videoSize) {
				return videoDataFormatter.formatVideoSize(videoSize);
			},
			formattedRes(videoWidth, videoHeight) {
				return videoDataFormatter.formatResolution(
					videoWidth,
					videoHeight
				);
			},
			formattedDate(dateCreated) {
				return videoDataFormatter.formatDate(dateCreated, 'YYYY-MM-DD');
			},
			handleImageError(e) {
				if (e.target.src !== this.defaultImg) {
					e.target.src = this.defaultImg;
					e.currentTarget.src = this.defaultImg;
				}
			},
			handleItemClick(item, index) {
			  if (this.isMultiSelect) {
				this.toggleSelect(item.Id);
			  } else {
				this.clickItem(item, index);
			  }
			},
			clickItem(item, index) {
				const handleNavigation = (type) => {
				  switch (type) {
				    case "Movie":
				    case "Video":
				      this.$store.dispatch('saveLargeList', {
				        data: this.list,
				        index,
				        httpParams: this.httpParams
				      }).then(() => {
				        uni.navigateTo({
				          url: `/pages/player/${platform}/short`
				        });
				      });
				      break;
				    case "BoxSet":
					case "Genre":
					case "Tag":
				      let seriesParams = {
				        ParentType: item.Type,
				        ChildIds: item.Id,
				        ParentName: item.Name
				      };
				      uni.navigateTo({ url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}` });
				      break;
				    default:
				      uni.showToast({
				      	title: '不支持该类型播放',
				      	icon: 'info',
				      })
				  }
				};
				      
				let platform;
				// #ifdef APP
				platform = 'app';
				// #endif
				// #ifndef APP
				platform = 'web';
				// #endif
				      
				handleNavigation(item.Type);
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 基础样式
	.container {
		width: 100%;
		// padding: 10px;
	}

	// 缩略图布局样式（保持原有样式并优化）
	.thumbnail-layout {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: space-between;
		justify-content: space-around;

		.content {
			display: flex;
			flex-flow: column;
			text-align: center;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s;
			margin: 0 5px 15px;
		}

		// 保持原有的缩略图相关样式...
		.imagebox {
			position: relative;
			width: 118px;
			height: 158px;
			margin: 6px 0;

			.icon {
				position: absolute;
				top: 35%;
				left: 40%;
			}
			
			.playedicon {
				position: absolute;
				top: 2%;
				right: 2%;
			}
			
			&.selected-item {
				box-shadow: 0 0 0 2px #ff3333, 0 0 10px rgba(255, 51, 51, 0.5);
				border-radius: 6px;
			}
			
			.multi-select-checkbox {
				position: absolute;
				top: 4px;
				left: 4px;
				width: 28px;
				height: 28px;
				border-radius: 4px;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
				transition: all 0.2s ease;
				
				&.checked {
				  background-color: #000;
				}
			  }
		}

		// 其他原有样式...
	}

	// 列表布局样式
	.list-layout {
		.list-item {
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #eee;
			&:last-child {
				border-bottom: none;
			}
		}

		.list-item-image {
			width: 80px;
			height: 50px;
			position: relative;
			margin-right: 15px;
			image {
				width: 100%;
				height: 100%;
				border-radius: 4px;
				object-fit: cover;
			}
			.icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.list-item-info {
			flex: 1;
			.list-title {
				font-size: 1rem;
				display: block;
				margin-bottom: 5px;
				font-weight: 600;
			}
			.list-meta {
				display: flex;
				align-items: center;
				font-size: 1.2rem;
				color: #666;
				.meta-item {
					margin-right: 15px;
				}
				.played-icon {
					margin-left: 5px;
				}
			}
		}

		.list-item-checkbox {
			width: 40px;
			text-align: center;
		}
	}
	
	// 列表文字布局样式
	.list-text-layout {
		.list-item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px;
			&:last-child {
				border-bottom: none;
			}
		}
	
		.list-item-image {
			width: 80px;
			height: 50px;
			position: relative;
			margin-right: 15px;
			image {
				width: 100%;
				height: 100%;
				border-radius: 4px;
				object-fit: cover;
			}
			.icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	
		.list-item-info {
			.list-title {
				font-size: 1rem;
				font-weight: 600;
				display: block;
				margin-bottom: 5px;
				color: #6ccf65;
			}
			.list-meta {
				display: flex;
				align-items: center;
				font-size: 0.7rem;
				color: #666;
				.meta-item {
					margin-right: 15px;
				}
				.played-icon {
					margin-left: 5px;
				}
			}
		}
	
		.list-item-checkbox {
			width: 40px;
			text-align: center;
		}
	}

	// 表格布局样式
	.table-layout {
		.table-header {
			display: flex;
			background-color: #f5f5f5;
			font-weight: bold;
			border-radius: 4px 4px 0 0;
		}

		.table-row {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			&:last-child {
				border-bottom: none;
			}
		}

		.table-col {
			padding: 12px 8px;
			word-break: break-all;
			&:first-child {
				padding-left: 12px;
			}
		}

		.table-body {
			background-color: #fff;
			border-radius: 0 0 4px 4px;
		}
	}

	// 响应式调整
	@media (min-width: 576px) {
		.thumbnail-layout {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 768px) {
		.thumbnail-layout {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (min-width: 992px) {
		.thumbnail-layout {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	// 其他原有样式...
	.content .image {
		margin-right: 10px;
		border-radius: 5px;
		box-shadow: 2px 2px 6px #333;
		background-image: url('@/static/img/errorImg.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: initial;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px;
		background-position: center center;
		background-size: 100% 100%;
	}

	.content .title {
		font-size: clamp(0.6rem, 0.7rem, 0.8rem);
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		margin: 0 0 10px 0;
		text-align: start;
		// color: #BCB6B8;
		--tw-text-opacity: 1;
	}

	.content .msg {
		font-size: 0.8rem;
		color: #888;
		display: block;
	}

	.content .info {
		width: 105px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.content .video-desc {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.content .text-original {
		color: #e80080;
	}

	.content .video-duration {
		--tw-text-opacity: 1;
		color: #E5E9F0;
		font-size: .75rem;
		line-height: 1rem;
		padding-top: .25rem;
		padding-bottom: .25rem;
		padding-left: .5rem;
		padding-right: .5rem;
		--tw-bg-opacity: .75;
		background-color: #1F2937;
		position: absolute;
		right: .25rem;
		bottom: .25rem;
		border-radius: .5rem;
	}

	.content .video-type {
		--tw-text-opacity: 1;
		color: #E5E9F0;
		font-size: .75rem;
		line-height: 1rem;
		padding-top: .25rem;
		padding-bottom: .25rem;
		padding-left: .5rem;
		padding-right: .5rem;
		--tw-bg-opacity: .75;
		background-color: #1E40B9;
		position: absolute;
		left: .25rem;
		bottom: .25rem;
		border-radius: .5rem;
	}

	.content .tag-tip {
		background-color: hsl(116, 41.7%, 50.2%);
		color: #ffffff;
		padding: 0 5px;
		border-radius: 2px;
	}

	.buttonbox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 10px;
	}

	.buttonbox .season {}

	.buttonbox .playnow {
		font-size: 0.8rem;
		background-color: #2b2b2b;
		border-radius: 20px;
		padding: 3px 10px;
	}

	.playnow .icon {
		margin-right: 3px;
	}

	.ellip {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/* degradation */
		height: 52px;
		overflow: hidden;
	}

	/* 响应式调整：根据屏幕宽度修改列数 */
	/* 屏幕 >= 576px（手机横屏/小平板）：2列 */
	@media (min-width: 576px) {
		.thumbnail-layout {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* 屏幕 >= 768px（平板）：3列 */
	@media (min-width: 768px) {
		.thumbnail-layout {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* 屏幕 >= 992px（桌面）：4列 */
	@media (min-width: 992px) {
		.thumbnail-layout {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	/* 弹窗样式 */
	.popup-content {
		min-width: 80%;
		background-color: #353535;
		border-radius: 10px;
		padding: 16px;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 0.5px dashed #eee;
		margin-bottom: 16px;
	}

	.popup-title {
		// font-size: 0.6rem;
		font-weight: bold;
	}

	.popup-body {
		max-height: 60vh;
		overflow-y: auto;
	}

	.info-item {
		display: flex;
		margin-bottom: 12px;
		// font-size: 0.6rem;
	}

	.label {
		color: #666;
		width: 80px;
		flex-shrink: 0;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-top: 12px;
		align-items: center;
	}

	.tag-item {
		border-radius: 4px;
		padding: 2px 8px;
		margin: 0 4px 4px 0;
		font-size: 0.5rem;
		background-color: hsl(116, 41.7%, 50.2%);
		color: #ffffff;
	}
	.checklist-text{
		border-radius: 4px;
		padding: 2px 8px;
		margin: 0 4px 4px 0;
		font-size: 0.5rem;
		color: #bbbbbb;
	}
	.checklist-box.is--tag{
		padding: 3px 2px;
		border: 1px #4CAF50 solid;
		border-radius: 3px;
		background-color: #4CAF50;
	}
</style>